<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{fullName}}
    </div>
</body>

</html>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            //fullName: 'Foo Bar'
        },
        // watch: {    //监听的属性在data必须时声明
        // 监听属性发生改变做些其他事情，可以有异步操作
        //     firstName(newVal,oldVal){  
        //         this.fullName = newVal+this.lastName   
        //     },
        //     lastName(newVal,oldVal){  
        //         this.fullName = newVal+this.firstName   
        //     }
        //     // firstName:{
        //     //     handler(newVal,oldVal){
        //     //         console.log(1);
        //     //        this.fullName = newVal.name+this.lastName 
        //     //     },
        //     //     immediate:true, //立即执行handler函数
        //     //     deep:true  //深度监控
        //     // }
        // }
        computed:{ //计算属性不能在data里声明过  不能异步操作
            // fullName(){  //firstName和lastName是依赖属性,会重新计算 若依赖属性没有发生改变，则直接从缓存中读取，不会再重新渲染，大大的提高性能
            //     return this.firstName+this.lastName; 
            // }
            fullName:{
                get(){ //获取值
                    return this.firstName+this.lastName; 
                },
                set(val){ //对计算属性设置值，这个值可以做些其他操作

                }
            }
        }
    })
   
</script>